<!--
*@Author: QWP
*@Description: 表单内的附件上传
*@Date: 2024-07-30 16:10:12
-->
<template>
  <a-upload v-model:file-list="fileList"  
    v-bind="$attrs"
    class="f-w-100"
    :multiple="$attrs['multiple'] || true"
    :customRequest="customRequest">
    <template #itemRender="{ file, actions }">
      <a-row class="f-w-100" style="height: auto">
        <div class="u-file-name">
          <template v-if="editUid == file.uid">
            <a-input v-model:value="file.name" v-if="file.filename"/>
            <a-input v-model:value="file.name" v-else-if="file.name"/>
          </template>
          <template v-else>
            <span class="s-text-color1 f-cursor" 
              @click="usePreview(file.filepath)">{{ file.filename || file.name }}
            </span>
          </template>
        </div>
        <a-col flex="1">
          <a-space size="large">
            <!-- 编辑图标 -->
            <template v-if="$attrs['disabled'] != true">
              <u-icon-font type="icon-xiugai" 
                class="u-field-upload-icon" 
                @click="editUid = file.uid" 
                v-if="editUid != file.uid">
              </u-icon-font>
              <u-icon-font type="icon-pizhun" 
                class="u-field-upload-icon" 
                @click="editUid = ''" v-else>
              </u-icon-font>
            </template>

            <!-- 下载 -->
            <u-icon-font type="icon-a-lujing12" 
              class="u-field-upload-icon"  
              @click="useDownload(file)"></u-icon-font>

            <u-icon-font type="icon-a-shanchu1" 
              class="u-field-upload-icon"  
              v-if="$attrs['disabled'] != true" 
              @click="deleteFile(file.uid)"></u-icon-font>
          </a-space>
        </a-col>
      </a-row>
    </template>
    <a-button v-if="$attrs['disabled'] != true">
      <upload-outlined></upload-outlined>
      上传附件
    </a-button>
  </a-upload>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-field-upload-copy'
})
import { ref, reactive, computed, onMounted, watch } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import type { UploadProps } from 'ant-design-vue';
import { api } from '@/http/api'
import * as fileApi from '@/service/file'
import { nullC } from '@/util/common'
import { cloneDeep } from 'lodash'
import { usePreview, useDownload } from '@/hooks/useFile'

const props = defineProps<{
  value: string | Array<any>,
  modelValue: string | Array<any>,
  fileParams: object
}>()

const emits = defineEmits(['update:value', 'update:modelValue'])

let editUid = ref<string>('')
const isInitShow = ref<boolean>(true)

const fileList = ref<UploadProps['fileList']>([]);

const deleteFile = (uid: string) => {
  fileList.value = fileList.value.filter(item => item.uid != uid)
  emits('update:value', fileList.value)
}

const change = ({ file, fileList, event}) => {
}

// 自定义上传
const customRequest = ({ onSuccess, onError, file, onProgress }) => {

  let form = new FormData();
  form.append('storagetype', 'LOCAL')
  form.append('file', file)
  form.append('bucket', nullC(props.fileParams['bucket']))
  form.append('biztype', nullC(props.fileParams['biztype']))

  fileApi.upload(form, {
    onUploadProgress: ({ total, loaded }) => {
      onProgress({ percent: Math.round((loaded / total) * 100) });
    },
  })
  .then(res => {
    if(res.data.code == 0) {
      const data = cloneDeep(res.data.data || {})
      onSuccess({ 
        ...file, 
        ...data,
        filename: nullC(data['originalfilename']) 
      })

      let index = fileList.value.findIndex(i => i.uid == file.uid);
      if(index != -1) {
        let tValue = cloneDeep(fileList.value)
        tValue[index] = {
          ...tValue[index], 
          ...data,
          orderno: index,
          filename: data.originalfilename,
          filetype: data.filetype['code'],
          filetype1: data.filetype['desc'],
          appendix: Object.assign(data, props.fileParams),
        }
        fileList.value = tValue
        emits('update:value', tValue)
      }
    }
  })
  .catch(err => {
    onError(err)
  })
}

watch(() => props.value, (nval, oval) => {
  isInitShow.value = false
  fileList.value = nval || [];
  setTimeout(() => isInitShow.value = true, 500)
})
</script>

<style lang='scss' scoped>
.u-file-name {
  // width: 80%; 
  padding: 0 30px 0 8px;
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.u-field-upload-icon {
  color: #AAAAAA;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  &:hover{
    color: #1890ff;
  }
}
:deep(.ant-upload-list) {
  height: calc(100% - 32px);
  padding: 6px 0;
  max-height: 150px;
  overflow: auto;
  .ant-upload-list-item-container  {
    height: auto !important;
  }
}
</style>